<template>
	<view class="balance">
		<!-- 背景盒子 -->
		<view class="bg_box">
			<view class="transparent_box">
				<image class="bg_img_left" src="../../static/images/personCenter/Vectorleft.png" mode=""></image>
				<image class="bg_img_right" src="../../static/images/personCenter/vector.png" mode=""></image>
				<image class="circle" src="../../static/images/personCenter/Circle.png" mode=""></image>

			</view>
			<view class="text_box flex-column " style="justify-content: space-between;">
				<view class="font-wight-600 " style="font-size: 48rpx;">${{userInfo.ytc_money||0}}</view>
				<view class="">账号余额</view>
				<view class="">截止统计日期 3/22</view>

			</view>
		</view>
		<!-- 变动明细 -->
		<view class="biandong" style="border-radius: 10rpx;">
			<view class="b_title fs-32 font-wight-600">
				变动明细
			</view>
			<!-- 列表 -->
			<view class="bd_list" v-for="(item,index) in bdList" :key="item.id">
				<view class="bet_flex fs-28 top">
					<view class="">{{item.title}}</view>
					<view class=""> <text>{{item.pm==1?'+':'-'}}</text> {{item.num}}</view>
				</view>
				<view class="bet_flex fs-24" style="color: #a6a6a6;">
					<view class="">{{times(item.created_at)}}</view>
					<view class="">余额{{item.new_balance}}</view>
				</view>
			</view>
			<!-- 暂无更多记录 -->
			<view class="nolist_box fs-32" v-if="!bdList.length>0">
				暂无更多记录 ~
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				bdList: [{
						id: 1,
						title: '设备产出',
						time: '2020-05-21 22:30:23',
						money: '2300.55',
						balance: '0.45',
						type: 1
					},
					{
						id: 2,
						title: '团队奖励',
						time: '2020-05-21 22:30:23',
						money: '2300.55',
						balance: '0.45',
						type: 1
					},
					{
						id: 3,
						title: '邀请返利',
						time: '2020-05-21 22:30:23',
						money: '2300.55',
						balance: '0.45',
						type: 1
					},
					{
						id: 4,
						title: '呆逼转账',
						time: '2020-05-21 22:30:23',
						money: '2300.55',
						balance: '0.45',
						type: 2
					},
				]
			};
		},
		onLoad() {
			
			this.spread()
		},
		methods:{
			times(str){
				let date=new Date( Number(str + '000') )
				const formatNumber = n => {
					n = n.toString()
					return n[1] ? n : '0' + n
				}
				 console.log(str);
				 	 console.log(date);
				const formatTime = (date, word = false, datestring = '/', timestring = ":") => {
					
					const year = date.getFullYear()
					const month = date.getMonth() + 1
					const day = date.getDate()
					const hour = date.getHours()
					const minute = date.getMinutes()
					const second = date.getSeconds()
					// if (word == false) {
					// 	return [year, month, day].map(formatNumber).join(datestring) + ' ' + [hour, minute, second].map(
					// 		formatNumber).join(
					// 		timestring)
					// }
					return [year].map(formatNumber) + '年' + [month].map(formatNumber) + '月' + [day].map(formatNumber) + '日' + ' ' +
						[
							hour
						].map(formatNumber) + ':' + [minute].map(formatNumber) + ':' + [second].map(formatNumber)
				}
				return formatTime(date)
			},
			async spread(){
				let res = await this.$http.get('user/get_bills', {
						
				})
				this.bdList=res.data
				
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #1E2240;
	}

	.balance {
		padding: 30rpx;

		.biandong {
			padding: 30rpx;
			border: 2rpx solid #707070;
			margin-top: 40rpx;
			background: #272C52;
			border-image: linear-gradient(to left, rgba(0, 20, 255, 1) 0%, rgba(128, 31, 240, 1) 50%, rgba(255, 44, 223, 1) 100%) 10;
			border-radius: 8rpx;
			border-image-slice: 8rpx;
			color: #fff;

			.nolist_box {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #A6A1A1;
				margin-top: 200rpx;

			}

			.bd_list {
				margin-top: 30rpx;

				.top {
					margin-bottom: 20rpx;
				}

				.bet_flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}

			.b_title {
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid rgba(247, 247, 247, 1);
			}
		}




		.bg_box {
			border-radius: 10rpx;
			height: 270rpx;
			box-shadow: 0rpx 20rpx 50rpx rgba(191, 21, 108, 0.05);
			background: linear-gradient(266.84deg, rgba(0, 20, 255, 1) 0%, rgba(128, 31, 240, 1) 50%, rgba(255, 44, 223, 1) 100%);

			.text_box {
				padding: 40rpx;
				color: #fff;
				// display: flex;
				// flex-direction: column;
				// justify-content: space-between;
				height: 100%;
			}

			.transparent_box {
				position: relative;

				.circle {
					position: absolute;
					height: 320rpx;
					width: 420rpx;
					right: -56rpx;
					top: -10rpx;
				}

				.bg_img_left {
					width: 360rpx;
					height: 370rpx;
					position: absolute;
					top: -60rpx;
					left: 0;
				}

				.bg_img_right {
					width: 370rpx;
					height: 280rpx;
					position: absolute;
					top: -60rpx;
					right: -40rpx;
				}
			}

		}
	}


	// .border-radius-#{$i}
</style>